<template>
  <div class="application">
    <!-- 按钮 -->
    <div class="btns">
      <!-- {{param}} -->
      <el-form
        label-width="40px"
        inline
        size="small"
      
      >
       <el-button type="primary" size="mini" @click="toAddHandler"
           icon="el-icon-plus"
            >添加</el-button
          >
        <el-form-item label=" " label-width="10px" size="small">
          <el-input
            v-model="param.name"
            placeholder="请输入名称"
            clearable
          ></el-input>
        </el-form-item>

        <el-select
          v-model="value"
          placeholder="请选择类型"
          size="small"
          @change="changeoption"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-form-item label-width="10px" label=" ">
          <el-input
            v-model="param.telephone"
            placeholder="请输入电话号码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item size="small">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="loadApplications"
            >查询</el-button
          >
          <el-button type="primary" @click="download" icon="el-icon-download">按名称导出</el-button>
        </el-form-item>
      </el-form>
    </div>

    
    <!-- /按钮 -->

    <!-- {{applications.createTime | formatDate}} -->

    <!-- {{applications}} -->
    <!-- 表格 -->
    <div class="bg">
      <el-table size="small" :data="applications" max-height="500px">
        <el-table-column
          type="index"
          :index="1"
          label="序号"
          width="50px"
          align="center"
        ></el-table-column>
        <el-table-column
          label="名称"
          prop="name"
          align="center"
          sortable
          width="100px"
        ></el-table-column>
        <el-table-column
          label="类型"
          prop="type"
          align="center"
          width="80px"
          sortable
        ></el-table-column>
        <el-table-column
          label="简介"
          prop="introduce"
          align="center"
          
        ></el-table-column>
        <el-table-column
          label="E-mail"
          prop="email"
          align="center"
          
          sortable
        ></el-table-column>
        <el-table-column
          label="联系电话"
          prop="telephone"
          align="center"
          sortable
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          align="center"
          :formatter="dateFormat"
          width="112px"
          sortable
        >
        </el-table-column>
        <el-table-column
          label="经度"
          prop="longitude"
          align="center"
          
        ></el-table-column>
        <el-table-column
          label="纬度"
          prop="latitude"
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          label="用户id"
          prop="userId"
          align="center"
        ></el-table-column> -->
        <el-table-column label="操作" width="120px" align="center">
          <template v-slot="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="editHandler(scope.row)"
              ></el-button
            >
            <!-- <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="edit(scope.row)"
            ></el-button> -->
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="del(scope.row)"
              ></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<script>
import { get, post, del } from "@/utils/request";
import moment from "moment";
export default {
  // 页面数据
  data() {
    return {
      options: [
        {
          value: "个人",
          label: "个人",
        },
        {
          value: "团队",
          label: "团队",
        },
        {
          value: " ",
          label: "全部",
        },
      ],
      value: "",
      //参数(保存检索的参数)
      param: {},
      applications: [],
      form: {},
      // dialogVisible: false,
    };
  },
  // 页面渲染的时候会调用的函数
  created() {
    this.loadApplications();
  },

  // 所有的方法
  methods: {
     download(){
      window.location.href="http://121.196.106.124:8888/Application/download?name= "+this.param.name
    },

    //时间戳改为时间格式
    dateFormat: function (row, column) {
      var date = row[column.property];

      if (date == undefined) {
        return "";
      }

      return moment(date).format("YYYY年MM月DD日HH时mm分");
      // return moment(date).format("HH:mm:ss")
    },

    changeoption(value) {
      if (value == " ") this.param.type = "";
      else this.param.type = value;
    },
    //保存
    save() {
      let url = "http://121.196.106.124:8888/Application/saveOrUpdate";
      post(url, this.form).then((response) => {
        // this.dialogVisible = false;
        this.$message({ type: "success", message: response.message });
        // 刷新
        this.loadApplications();
      });
    },
    //删除
    del(row) {
      this.$confirm("此操作将永久删除此用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "http://121.196.106.124:8888/Application/deleteById";
        del(url, { id: row.id }).then((response) => {
          // 1. 提示
          this.$message({ type: "success", message: response.message });
          // 2. 刷新
          this.loadApplications();
        });
      });
    },
    loadApplications() {
      let url = "http://121.196.106.124:8888/Application/query";
      get(url, this.param).then((resp) => {
        this.applications = resp.data;
      });
    },
    editHandler(row) {
      this.$router.push({
        path: "/application/create",
        query: row,
      });
    },
    // edit(row) {
    //   this.form = row;
    //   this.dialogVisible = true;
    // },
    // toAdd() {
    //   this.dialogVisible = true;
    // },
    toAddHandler() {
      this.$router.push("/application/create");
    },
  },
};
</script>
<style scoped>
.btns {
  padding-top: 15px;
  padding-left: 20px;
}


.bg {
  padding-left: 10px;
  border: 1px solid rgb(241, 241, 247);
}
</style>